
@import url(./index.less);
@import url(../../../styles/common.less);
@keyframes experience_animation {
    0%{
        transform: translateY(100vh);
        opacity:0;
    }
    100%{
        transform: translateY(0);
        opacity:1;
    }
}
.job_section{
    .job_part();
    .flex(@jc:flex-start);
    background: var(--accentColor2);
    .experience{
        width: 30%;
        height: 100%;
        .flex(@fd: column;);
        justify-content: space-evenly;
        .title();
        transform: translateY(0);
    }
    .experience_open{
        animation-name: experience_animation;
        animation-duration: .8s;
        animation-timing-function: ease-in;
        transform: translateY(0);
        opacity: 1;
    }
    .time_line{
        :global{
            .time_line_content{
                padding-left: 0;
            }
            .circle{
                border: 0.3rem solid var(--primaryColor);
                padding: 0.3rem;
            }
            .line{
                border: 0.15rem solid var(--dividerColor);
                height: calc(100% - 1.45rem);
                left: 0.45rem;
                position: absolute;
                top: 1.45rem;
                width: 0;
            }
            .text{
                margin-left: 2rem;
                padding-bottom: 3rem;
                p{
                    margin-top: 0;
                    color: var(--textTitleColor);
                    font-size: 1.5rem;
                    font-family: denglong;
                }
            }
           
        }
        
    }
}

@media screen and (max-width: @mobile_screen) {
    .job_section{
        .flex(@fd: column;);
        .job_part_mobile();
        .experience{
            flex-direction: row;
            width: fit-content;
            height: auto;
            .title_mobile();
        }
        
        .time_line{
            padding-left: 0;
            :global{
                .time_line_content{
                    padding-left:0 ;
                    .circle{
                        border: 0.3rem solid var(--primaryColor);
                        padding: 0.3rem;
                    }
                    .line{
                        border: 0.15rem solid var(--dividerColor);
                        height: calc(100% - 1.4rem);
                        left: 0.45rem;
                        position: absolute;
                        top: 1.45rem;
                        width: 0;
                    }
                    .text{
                        margin-left: 2rem;
                        padding-bottom: 1.5rem;
                        p{
                            margin: 0;
                            color: var(--textTitleColor);
                            font-size: 1.2rem;
                            font-family: denglong;
                        }
                    }
                }
            }
        }
    }
}